import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem, Image, Text } from '@tarojs/components'
import { AtList, AtListItem } from 'taro-ui'
import PropTypes from 'prop-types'
import './index.scss'

const IMAGE_PREFIX = 'https://clover-mini-program.oss-cn-beijing.aliyuncs.com/';

export default class XGood extends Component {

  state = {
    current: 0
  }

  static propTypes = {
    data: PropTypes.object,
    GoodsPrizes: PropTypes.array
  }

  static defaultProps = {
    data: {},
    GoodsPrizes: [],
  }

  navigateToMiniProgram = appId => {
    Taro.navigateToMiniProgram({ appId }).then(res => {
      console.log(res, '小程序跳转成功')
    }).catch(e=> Taro.showToast({ title: '请在后台以及公众号正确绑定小程序 ID', icon: 'none' }))
  }

  onSwiperChange = e => {
    const current = e.detail.current;
    this.props.onChange(current);
    this.setState(state => ({
      ...state,
      current
    }))
  }

  render() {
    return (
      <View className='good'>
        <Swiper
          className='banner'
          indicatorColor='#eee'
          indicatorActiveColor='#FD5543'
          vertical={false}
          circular
          indicatorDots
          autoplay
          duration={300}
          onChange={this.onSwiperChange.bind(this)}
        >
          {
            this.props.data.GoodsPrizes.map(item => (
              <SwiperItem key={item.id}>
                <Image src={IMAGE_PREFIX + item.cover} className='image' mode='widthFix' />
              </SwiperItem>
            ))
          }
        </Swiper>

        <View className='profile-title'>
          <View className='title'>
            <Text className='text'>{this.props.data.GoodsPrizes && this.props.data.GoodsPrizes[this.state.current].title}</Text>
          </View>
          <View className='brief'>
            <Text className='text'>{this.props.data.type === 0 ?  `参与人数满${this.props.data.number}自动开奖` : this.props.data.type === 1 ? `${this.props.data.endAt}自动开奖` : null }</Text>
          </View>
        </View>

        <AtList hasBorder={true}>
          <AtListItem
            title='赞助商'
            extraText={this.props.data.sponsor}
            arrow='right'
            extraThumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
            onClick={this.navigateToMiniProgram.bind(this, 'appId')}
          />
        </AtList>
      </View>
    )
  }
}